<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>闯关结果 - 渐进学习平台</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <style>
    /* ===== 基础样式 ===== */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

    body {
      background: linear-gradient(135deg, #0a0a2a 0%, #1a1a4a 50%, #0a0a2a 100%);
      color: white;
      min-height: 100vh;
      overflow-x: hidden;
      position: relative;
    }

    /* ===== 背景动画 ===== */
    .stars {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
    }

    .star {
      position: absolute;
      background-color: white;
      border-radius: 50%;
      animation: twinkle 5s infinite;
    }

    @keyframes twinkle {
      0%, 100% { opacity: 0.2; }
      50% { opacity: 1; }
    }

    /* ===== 结算容器 ===== */
    .result-container {
      max-width: 1000px;
      margin: 0 auto;
      padding: 40px 20px;
      text-align: center;
      position: relative;
      z-index: 1;
    }

    /* ===== 结果标题 ===== */
    .result-title {
      font-size: 72px;
      font-weight: bold;
      margin-bottom: 30px;
      text-transform: uppercase;
      letter-spacing: 4px;
      text-shadow: 0 0 20px rgba(255, 255, 255, 0.7);
      opacity: 0;
      transform: translateY(-50px);
      animation: titleAppear 1.5s forwards 0.5s;
    }

    .victory {
      color: #ffd700;
      text-shadow: 0 0 20px rgba(255, 215, 0, 0.7);
    }

    .defeat {
      color: #c41e3a;
      text-shadow: 0 0 20px rgba(196, 30, 58, 0.7);
    }

    @keyframes titleAppear {
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* ===== 段位徽章 ===== */
    .rank-badge {
      width: 200px;
      height: 200px;
      margin: 0 auto 40px;
      position: relative;
      opacity: 0;
      transform: scale(0.5);
      animation: badgeAppear 1s forwards 1s;
    }

    @keyframes badgeAppear {
      to {
        opacity: 1;
        transform: scale(1);
      }
    }

    .rank-icon {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 80px;
      position: relative;
      z-index: 2;
    }

    .rank-glow {
      position: absolute;
      top: -10px;
      left: -10px;
      right: -10px;
      bottom: -10px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(255,215,0,0.5) 0%, rgba(255,215,0,0) 70%);
      z-index: 1;
      animation: glowPulse 2s infinite alternate;
    }

    @keyframes glowPulse {
      from { transform: scale(1); opacity: 0.7; }
      to { transform: scale(1.1); opacity: 1; }
    }

    /* ===== 数据统计 ===== */
    .stats-container {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 20px;
      margin-bottom: 40px;
      opacity: 0;
      animation: statsAppear 1s forwards 1.5s;
    }

    @keyframes statsAppear {
      to { opacity: 1; }
    }

    .stat-card {
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(10px);
      border-radius: 12px;
      padding: 20px;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
      border: 1px solid rgba(255, 255, 255, 0.1);
      transition: transform 0.3s;
    }

    .stat-card:hover {
      transform: translateY(-5px);
    }

    .stat-value {
      font-size: 36px;
      font-weight: bold;
      margin-bottom: 10px;
    }

    .stat-label {
      font-size: 16px;
      color: rgba(255, 255, 255, 0.7);
    }

    /* ===== 按钮区域 ===== */
    .action-buttons {
      display: flex;
      justify-content: center;
      gap: 20px;
      margin-top: 40px;
      opacity: 0;
      animation: buttonsAppear 1s forwards 2s;
    }

    @keyframes buttonsAppear {
      to { opacity: 1; }
    }

    .btn {
      padding: 15px 30px;
      border-radius: 8px;
      text-decoration: none;
      font-weight: 600;
      font-size: 18px;
      transition: all 0.3s;
      display: inline-flex;
      align-items: center;
      cursor: pointer;
      border: none;
      position: relative;
      overflow: hidden;
    }

    .btn::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
      transition: left 0.5s;
    }

    .btn:hover::before {
      left: 100%;
    }

    .btn-primary {
      background: linear-gradient(135deg, #007bff, #0056b3);
      color: white;
      box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3);
    }

    .btn-success {
      background: linear-gradient(135deg, #28a745, #20c997);
      color: white;
      box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
    }

    .btn-outline {
      background: transparent;
      color: white;
      border: 2px solid rgba(255, 255, 255, 0.3);
    }

    .btn:hover {
      transform: translateY(-3px);
      box-shadow: 0 6px 20px rgba(0, 123, 255, 0.4);
    }

    .btn-outline:hover {
      background: rgba(255, 255, 255, 0.1);
    }

    /* ===== 段位颜色 ===== */
    .bronze { background: linear-gradient(135deg, #cd7f32, #8b4513); }
    .silver { background: linear-gradient(135deg, #c0c0c0, #a9a9a9); }
    .gold { background: linear-gradient(135deg, #ffd700, #daa520); }
    .platinum { background: linear-gradient(135deg, #e5e4e2, #b8b8b8); }
    .diamond { background: linear-gradient(135deg, #b9f2ff, #7fffd4); }
    .master { background: linear-gradient(135deg, #8a2be2, #4b0082); }
    .grandmaster { background: linear-gradient(135deg, #ff0000, #8b0000); }
    .challenger { background: linear-gradient(135deg, #1e90ff, #0000ff); }

    /* ===== 进度条 ===== */
    .progress-container {
      margin: 30px 0;
      opacity: 0;
      animation: progressAppear 1s forwards 2s;
    }

    @keyframes progressAppear {
      to { opacity: 1; }
    }

    .progress-label {
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;
    }

    .progress-bar {
      height: 20px;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 10px;
      overflow: hidden;
    }

    .progress-fill {
      height: 100%;
      background: linear-gradient(90deg, #ffd700, #ff8c00);
      border-radius: 10px;
      width: 0;
      transition: width 2s ease-out 2.5s;
    }

    /* ===== 响应式设计 ===== */
    @media (max-width: 768px) {
      .result-title {
        font-size: 48px;
      }

      .rank-badge {
        width: 150px;
        height: 150px;
      }

      .rank-icon {
        font-size: 60px;
      }

      .stats-container {
        grid-template-columns: 1fr 1fr;
      }

      .action-buttons {
        flex-direction: column;
        align-items: center;
      }
    }

    @media (max-width: 480px) {
      .result-title {
        font-size: 36px;
      }

      .stats-container {
        grid-template-columns: 1fr;
      }

      .stat-value {
        font-size: 28px;
      }
    }
  </style>
</head>
<body>
<!-- 动态星空背景 -->
<div class="stars" id="stars"></div>

<!-- 结算页面容器 -->
<div class="result-container">
  <!-- 结果标题 -->
  <h1 class="result-title victory" id="resultTitle">闯关成功</h1>

  <!-- 段位徽章 -->
  <div class="rank-badge">
    <div class="rank-icon gold">
      <i class="fas fa-crown"></i>
    </div>
    <div class="rank-glow"></div>
  </div>

  <!-- 进度条 -->
  <div class="progress-container">
    <div class="progress-label">
      <span>当前经验</span>
      <span>650 / 1000</span>
    </div>
    <div class="progress-bar">
      <div class="progress-fill" style="width: 65%"></div>
    </div>
  </div>

  <!-- 数据统计 -->
  <div class="stats-container">
    <div class="stat-card">
      <div class="stat-value">85</div>
      <div class="stat-label">得分</div>
    </div>
    <div class="stat-card">
      <div class="stat-value">4/5</div>
      <div class="stat-label">正确题目</div>
    </div>
    <div class="stat-card">
      <div class="stat-value">12:34</div>
      <div class="stat-label">用时</div>
    </div>
    <div class="stat-card">
      <div class="stat-value">黄金I</div>
      <div class="stat-label">段位</div>
    </div>
  </div>

  <!-- 按钮区域 -->
  <div class="action-buttons">
    <button class="btn btn-primary">
      <i class="fas fa-redo"></i> 重新挑战
    </button>
    <button class="btn btn-success">
      <i class="fas fa-arrow-right"></i> 下一个知识点
    </button>
    <button class="btn btn-outline">
      <i class="fas fa-home"></i> 返回主页
    </button>
  </div>
</div>

<script>
  // 创建星空背景
  function createStars() {
    const starsContainer = document.getElementById('stars');
    const starsCount = 150;

    for (let i = 0; i < starsCount; i++) {
      const star = document.createElement('div');
      star.className = 'star';

      // 随机位置和大小
      const size = Math.random() * 3;
      star.style.width = `${size}px`;
      star.style.height = `${size}px`;
      star.style.left = `${Math.random() * 100}%`;
      star.style.top = `${Math.random() * 100}%`;

      // 随机动画延迟
      star.style.animationDelay = `${Math.random() * 5}s`;

      starsContainer.appendChild(star);
    }
  }

  // 根据分数显示不同的结果
  function showResult(score) {
    const resultTitle = document.getElementById('resultTitle');

    if (score >= 80) {
      resultTitle.textContent = '闯关成功';
      resultTitle.className = 'result-title victory';
    } else if (score >= 60) {
      resultTitle.textContent = '勉强通过';
      resultTitle.className = 'result-title victory';
    } else {
      resultTitle.textContent = '闯关失败';
      resultTitle.className = 'result-title defeat';
    }
  }

  // 初始化页面
  document.addEventListener('DOMContentLoaded', function() {
    createStars();

    // 模拟从后端获取分数
    const score = 85; // 实际应用中从后端获取
    showResult(score);

    // 进度条动画
    setTimeout(() => {
      document.querySelector('.progress-fill').style.width = '65%';
    }, 2500);
  });
</script>
</body>
</html>